<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="theme-color" content="#0078E7"><meta name="author" content="爱肖彤真是太好了"><meta name="copyright" content="爱肖彤真是太好了"><meta name="generator" content="Hexo 5.1.1"><meta name="theme" content="hexo-theme-yun"><title>HTTP协议查漏补缺 | 工藤旧二の博客</title><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@900&amp;display=swap" media="none" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/star-markdown-css@0.1.19/dist/yun/yun-markdown.min.css"><script src="//at.alicdn.com/t/font_1140697_stqaphw3j4.js" async></script><script src="https://cdn.jsdelivr.net/npm/scrollreveal/dist/scrollreveal.min.js" defer></script><script>document.addEventListener("DOMContentLoaded", () => {
  [".post-card",".post-content img"].forEach((target)=> {
    ScrollReveal().reveal(target);
  })
});
</script><link rel="shortcut icon" type="image/svg+xml" href="/task/yun.ico"><link rel="mask-icon" href="/task/yun.ico" color="#0078E7"><link rel="alternate icon" href="/yun.ico"><link rel="preload" href="/task/css/hexo-theme-yun.css" as="style"><link rel="preload" href="/task/js/utils.js" as="script"><link rel="preload" href="/task/js/hexo-theme-yun.js" as="script"><link rel="prefetch" href="/task/js/sidebar.js" as="script"><link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin><link rel="stylesheet" href="/task/css/hexo-theme-yun.css"><link rel="alternate" href="/task/atom.xml" title="工藤旧二の博客" type="application/atom+xml"><script id="yun-config">
    const Yun = window.Yun || {};
    window.CONFIG = {"root":"/task/","title":"工藤旧二の博客","version":"0.9.7","anonymous_image":"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg","say":{"api":"https://v1.hitokoto.cn","hitokoto":true},"local_search":{"path":"/task/search.xml"},"fireworks":{"colors":["102, 167, 221","62, 131, 225","33, 78, 194"]}};
  </script><script>(function(){
  var bp = document.createElement('script');
  var curProtocol = window.location.protocol.split(':')[0];
  if (curProtocol === 'https') {
    bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
  }
  else {
    bp.src = 'http://push.zhanzhang.baidu.com/push.js';
  }
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(bp, s);
})();</script><meta name="description" content="一、HTTP协议版本区别 0.9 远古版本，只有一个GET命令，只支持纯文本 1.1 主流版本 引入了持久链接，通过请求头中的 keep-alive来设置 引入了管道机制，同一个tcp链接可以同时发送多个请求 支持断点续传，请求头中的 range来实现 使用了虚拟网络，一个物理机上可以存在多个虚拟主机，共享一个ip地址   2.0 先进版本 二进制分帧：头信息和数据体都是二进制 头部压缩：在1.1">
<meta property="og:type" content="article">
<meta property="og:title" content="HTTP协议查漏补缺">
<meta property="og:url" content="http://huang_zhao.gitee.io/task/2020/09/13/%E5%89%8D%E7%AB%AF/HTTP%E5%8D%8F%E8%AE%AE%E6%9F%A5%E6%BC%8F%E8%A1%A5%E7%BC%BA/index.html">
<meta property="og:site_name" content="工藤旧二の博客">
<meta property="og:description" content="一、HTTP协议版本区别 0.9 远古版本，只有一个GET命令，只支持纯文本 1.1 主流版本 引入了持久链接，通过请求头中的 keep-alive来设置 引入了管道机制，同一个tcp链接可以同时发送多个请求 支持断点续传，请求头中的 range来实现 使用了虚拟网络，一个物理机上可以存在多个虚拟主机，共享一个ip地址   2.0 先进版本 二进制分帧：头信息和数据体都是二进制 头部压缩：在1.1">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-09-13T05:20:11.000Z">
<meta property="article:modified_time" content="2020-09-13T14:49:49.000Z">
<meta property="article:author" content="爱肖彤真是太好了">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="协议，查漏补缺">
<meta name="twitter:card" content="summary"><script src="/task/js/ui/mode.js"></script><link rel="stylesheet" href="/task/css/prism.css" type="text/css"></head><body><script defer src="https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js"></script><script defer src="/task/js/ui/fireworks.js"></script><canvas class="fireworks"></canvas><div class="container"><a class="sidebar-toggle hty-icon-button" id="menu-btn"><div class="hamburger hamburger--spin" type="button"><span class="hamburger-box"><span class="hamburger-inner"></span></span></div></a><div class="sidebar-toggle sidebar-overlay"></div><aside class="sidebar"><script src="/task/js/sidebar.js"></script><ul class="sidebar-nav"><li class="sidebar-nav-item sidebar-nav-toc hty-icon-button sidebar-nav-active" data-target="post-toc-wrap" title="文章目录"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-list-ordered"></use></svg></li><li class="sidebar-nav-item sidebar-nav-overview hty-icon-button" data-target="site-overview-wrap" title="站点概览"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-passport-line"></use></svg></li></ul><div class="sidebar-panel" id="site-overview-wrap"><div class="site-info fix-top"><a class="site-author-avatar" href="/task/about/" title="爱肖彤真是太好了"><img width="96" loading="lazy" src="/task/Yun.png" alt="爱肖彤真是太好了"></a><div class="site-author-name"><a href="/task/about/">爱肖彤真是太好了</a></div><a class="site-name" href="/task/about/site.html">工藤旧二の博客</a><sub class="site-subtitle"></sub><div class="site-desciption"></div></div><nav class="site-state"><a class="site-state-item hty-icon-button icon-home" href="/task/" title="首页"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-home-4-line"></use></svg></span></a><div class="site-state-item"><a href="/task/archives/" title="归档"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-archive-line"></use></svg></span><span class="site-state-item-count">57</span></a></div><div class="site-state-item"><a href="/task/categories/" title="分类"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-folder-2-line"></use></svg></span><span class="site-state-item-count">2</span></a></div><div class="site-state-item"><a href="/task/tags/" title="标签"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-price-tag-3-line"></use></svg></span><span class="site-state-item-count">50</span></a></div><a class="site-state-item hty-icon-button" target="_blank" rel="noopener" href="https://yun.yunyoujun.cn" title="文档"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-settings-line"></use></svg></span></a></nav><hr style="margin-bottom:0.5rem"><div class="links-of-author"><a class="links-of-author-item hty-icon-button" rel="noopener" title="RSS" target="_blank" style="color:orange"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-rss-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="QQ" target="_blank" style="color:#12B7F5"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-qq-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="GitHub" target="_blank" style="color:#6e5494"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-github-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="微博" target="_blank" style="color:#E6162D"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-weibo-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="豆瓣" target="_blank" style="color:#007722"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-douban-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" href="https://music.163.com/#/user/home?id=552858287" title="网易云音乐" target="_blank" style="color:#C20C0C"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-netease-cloud-music-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="知乎" target="_blank" style="color:#0084FF"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhihu-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" href="https://space.bilibili.com/15081363" title="哔哩哔哩" target="_blank" style="color:#FF8EB3"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-bilibili-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="Twitter" target="_blank" style="color:#1da1f2"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-twitter-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="Telegram Channel" target="_blank" style="color:#0088CC"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-telegram-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="E-Mail" target="_blank" style="color:#8E71C1"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-mail-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="Travelling" target="_blank" style="color:var(--hty-text-color)"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-send-plane-2-line"></use></svg></a></div><hr style="margin:0.5rem 1rem"><div class="links"><a class="links-item hty-icon-button" href="/task/links/" title="我的小伙伴们" style="color:dodgerblue"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-genderless-line"></use></svg></a></div><br><a class="links-item hty-icon-button" id="toggle-mode-btn" href="javascript:;" title="Mode" style="color: #f1cb64"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-contrast-2-line"></use></svg></a></div><div class="sidebar-panel sidebar-panel-active" id="post-toc-wrap"><div class="post-toc"><div class="post-toc-content"><ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80%E3%80%81HTTP%E5%8D%8F%E8%AE%AE%E7%89%88%E6%9C%AC%E5%8C%BA%E5%88%AB"><span class="toc-text">一、HTTP协议版本区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8C%E3%80%81%E7%8A%B6%E6%80%81%E7%A0%81"><span class="toc-text">二、状态码</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1xx-%E4%BF%A1%E6%81%AF%E7%B1%BB"><span class="toc-text">1xx 信息类</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2xx-%E6%88%90%E5%8A%9F"><span class="toc-text">2xx 成功</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3xx-%E9%87%8D%E5%AE%9A%E5%90%91"><span class="toc-text">3xx 重定向</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4xx-%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%94%99%E8%AF%AF"><span class="toc-text">4xx 客户端错误</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5xx-%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%94%99%E8%AF%AF"><span class="toc-text">5xx 服务器错误</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%89%E3%80%81HTTP%E7%9A%84%E7%BC%93%E5%AD%98%E7%AD%96%E7%95%A5"><span class="toc-text">三、HTTP的缓存策略</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E5%BC%BA%E7%BC%93%E5%AD%98"><span class="toc-text">1 强缓存</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E5%8D%8F%E5%95%86%E7%BC%93%E5%AD%98"><span class="toc-text">2 协商缓存</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#2-1-Last-Modified"><span class="toc-text">2.1 Last-Modified</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-2-ETag"><span class="toc-text">2.2 ETag</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-3-%E6%80%BB%E7%BB%93%EF%BC%9A"><span class="toc-text">2.3 总结：</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E7%BC%93%E5%AD%98%E4%BD%8D%E7%BD%AE"><span class="toc-text">3 缓存位置</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E6%80%BB%E7%BB%93"><span class="toc-text">4 总结</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%9B%E3%80%81HTTP%E5%92%8CHTTPS"><span class="toc-text">四、HTTP和HTTPS</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%94%E3%80%81%E7%9F%AD%E8%BD%AE%E8%AF%A2%EF%BC%8C%E9%95%BF%E8%BD%AE%E8%AF%A2%EF%BC%8CWebSocket"><span class="toc-text">五、短轮询，长轮询，WebSocket</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E7%9F%AD%E8%BD%AE%E8%AF%A2"><span class="toc-text">1 短轮询</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E9%95%BF%E8%BD%AE%E8%AF%A2"><span class="toc-text">2 长轮询</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-WebSocket"><span class="toc-text">3 WebSocket</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%AD%E3%80%81%E6%AD%A3%E5%90%91%E4%BB%A3%E7%90%86%E5%92%8C%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86"><span class="toc-text">六、正向代理和反向代理</span></a></li></ol></div></div></div></aside><main class="sidebar-translate" id="content"><div id="post"><article class="post-block" itemscope itemtype="https://schema.org/Article"><link itemprop="mainEntityOfPage" href="http://huang_zhao.gitee.io/task/task/2020/09/13/%E5%89%8D%E7%AB%AF/HTTP%E5%8D%8F%E8%AE%AE%E6%9F%A5%E6%BC%8F%E8%A1%A5%E7%BC%BA/"><span hidden itemprop="author" itemscope itemtype="https://schema.org/Person"><meta itemprop="name" content="爱肖彤真是太好了"><meta itemprop="description"></span><span hidden itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><meta itemprop="name" content="工藤旧二の博客"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">HTTP协议查漏补缺</h1><div class="post-meta"><div class="post-time" style="display:block"><span class="post-meta-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-calendar-line"></use></svg></span> <time title="创建时间：2020-09-13 13:20:11" itemprop="dateCreated datePublished" datetime="2020-09-13T13:20:11+08:00">2020-09-13</time></div><span class="post-count"><span class="post-symbolcount"><span class="post-meta-item-icon" title="本文字数"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-file-word-line"></use></svg></span> <span title="本文字数">2k</span><span class="post-meta-divider">-</span><span class="post-meta-item-icon" title="阅读时长"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-timer-line"></use></svg></span> <span title="阅读时长">7m</span></span></span><span class="post-busuanzi"><span class="post-meta-divider">-</span><span class="post-meta-item-icon" title="阅读次数"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-eye-line"></use></svg> <span id="busuanzi_value_page_pv"></span></span></span><div class="post-classify"><span class="post-category"><span class="post-meta-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-folder-line"></use></svg></span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a class="category" href="/task/categories/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/" style="--text-color:var(--hty-text-color)" itemprop="url" rel="index"><span itemprop="text">技术分享</span></a></span></span><span class="post-tag"><span class="post-meta-divider">-</span><a class="tag" href="/task/tags/%E5%89%8D%E7%AB%AF/" style="--text-color:var(--hty-text-color)"><span class="post-meta-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-price-tag-3-line"></use></svg></span><span class="tag-name">前端</span></a><a class="tag" href="/task/tags/%E5%8D%8F%E8%AE%AE%EF%BC%8C%E6%9F%A5%E6%BC%8F%E8%A1%A5%E7%BC%BA/" style="--text-color:var(--hty-text-color)"><span class="post-meta-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-price-tag-3-line"></use></svg></span><span class="tag-name">协议，查漏补缺</span></a></span></div></div></header><section class="post-body" itemprop="articleBody"><div class="post-content markdown-body" style="--smc-primary:#0078E7;"><h3 id="一、HTTP协议版本区别"><a href="#一、HTTP协议版本区别" class="headerlink" title="一、HTTP协议版本区别"></a>一、HTTP协议版本区别</h3><ul>
<li>0.9 远古版本，只有一个GET命令，只支持纯文本</li>
<li>1.1 主流版本<ul>
<li>引入了持久链接，通过请求头中的<code> keep-alive</code>来设置</li>
<li>引入了管道机制，同一个tcp链接可以同时发送多个请求</li>
<li>支持断点续传，请求头中的<code> range</code>来实现</li>
<li>使用了虚拟网络，一个物理机上可以存在多个虚拟主机，共享一个ip地址</li>
</ul>
</li>
<li>2.0 先进版本<ul>
<li>二进制分帧：头信息和数据体都是二进制</li>
<li>头部压缩：在1.1版本头部信息会偏重，而body只有几十个字节，通过HPACK算法进行亚索</li>
<li>多路复用：一个TCP链接，哭护短和浏览器都可以同时发出多个请求，不用按顺序一一对应，解决了队头阻塞的问题</li>
<li>请求优先级：可以设置数据帧的优先级，让服务器先处理重要的请求</li>
</ul>
</li>
</ul>
<h3 id="二、状态码"><a href="#二、状态码" class="headerlink" title="二、状态码"></a>二、状态码</h3><ul>
<li>1xx：代表请求已经被接受，需要后续处理</li>
<li>2xx：表示成功</li>
<li>3xx：重定向状态</li>
<li>4xx：客户端有误</li>
<li>5xx：服务器错误</li>
</ul>
<h4 id="1xx-信息类"><a href="#1xx-信息类" class="headerlink" title="1xx 信息类"></a>1xx 信息类</h4><p>接受的请求正在处理，信息类状态码</p>
<h4 id="2xx-成功"><a href="#2xx-成功" class="headerlink" title="2xx 成功"></a>2xx 成功</h4><ul>
<li><p>200 OK 表示从客户端发来的请求在服务器端被正确请求。</p>
</li>
<li><p>204 No content，表示请求成功，但没有资源可返回。</p>
</li>
<li><p>206 Partial Content，该状态码表示客户端进行了范围请求，而服务器成功执行了这部分的 GET 请求 响应报文中包含由 <strong>「Content-Range」</strong> 指定范围的实体内容。</p>
</li>
</ul>
<h4 id="3xx-重定向"><a href="#3xx-重定向" class="headerlink" title="3xx 重定向"></a>3xx 重定向</h4><ul>
<li>301 moved permanently，永久性重定向，表示资源已被分配了新的 URL，这时应该按 Location 首部字段提示的 URI 重新保存。</li>
<li>302 found，临时性重定向，表示资源临时被分配了新的 URL。</li>
<li>303 see other，表示资源存在着另一个 URL，应使用 GET 方法获取资源。</li>
<li>304 not modified，当协商缓存命中时会返回这个状态码。</li>
<li>307 temporary redirect，临时重定向，和302含义相同,不会改变method</li>
</ul>
<p>注意区分：301（永久重定向），302（临时重定向）</p>
<h4 id="4xx-客户端错误"><a href="#4xx-客户端错误" class="headerlink" title="4xx 客户端错误"></a>4xx 客户端错误</h4><ul>
<li>400 bad request，请求报文存在语法错误。</li>
<li>401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息。</li>
<li>403 forbidden，表示对请求资源的访问被服务器拒绝，可能遇到跨站请求伪造</li>
<li>404 not found，表示在服务器上没有找到请求的资源，可能是网址输错了</li>
<li>405 Method Not Allowed，服务器禁止使用该方法，客户端可以通过options方法来查看服务器允许的访问方法，可能遇到了cors，跨域问题</li>
</ul>
<h4 id="5xx-服务器错误"><a href="#5xx-服务器错误" class="headerlink" title="5xx 服务器错误"></a>5xx 服务器错误</h4><ul>
<li>500 internal sever error，表示服务器端在执行请求时发生了错误。</li>
<li>502 Bad Gateway，服务器自身是正常的，访问的时候出了问题，具体啥错误我们不知道。</li>
<li>503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求。</li>
</ul>
<h3 id="三、HTTP的缓存策略"><a href="#三、HTTP的缓存策略" class="headerlink" title="三、HTTP的缓存策略"></a>三、HTTP的缓存策略</h3><h4 id="1-强缓存"><a href="#1-强缓存" class="headerlink" title="1 强缓存"></a>1 强缓存</h4><p>两个关键字段：Expires，Cache-Control</p>
<p>HTTP1.0版本，使用的是Expires，HTTP1.1使用的是Cache-Control</p>
<ul>
<li>Expires表示过期时间，时间是相对于服务器时间而言，所以可能因为服务器和客户端时间不一致而出错</li>
<li>Cache-Control 表示过期时长，从现在开始多少秒过期，这样就避免了两端时间不一致的问题</li>
</ul>
<p>注意点：</p>
<ul>
<li>当Expires和Cache-Control同时存在时，优先考虑Cache-Control。</li>
<li>当然了，当缓存资源失效了，也就是没有命中强缓存，接下来就进入协商缓存👇</li>
</ul>
<h4 id="2-协商缓存"><a href="#2-协商缓存" class="headerlink" title="2 协商缓存"></a>2 协商缓存</h4><p>强缓存失效后，浏览器就会在请求头中携带响应的缓存Tag向服务器发送请求，服务器根据tag决定是否使用缓存</p>
<p>缓存分成两种：<strong>「Last-Modified」</strong> 和 <strong>「ETag」</strong></p>
<h5 id="2-1-Last-Modified"><a href="#2-1-Last-Modified" class="headerlink" title="2.1 Last-Modified"></a>2.1 Last-Modified</h5><p>表示最后修改时间，第一次请求的时候，服务器的响应头会带上这个参数，然后这个参数会在下一次缓存未命中的时候加入到请求头改为：<strong>If-Modified-Since</strong>，key不同，但是value相同，服务器拿到这个字段后，就会和请求资源的最后修改时间对比</p>
<ul>
<li>如果请求头的时间更久远，说明这个数据已经发生了改变就要跟新这个缓存了，返回新的资源</li>
<li>否则返回304告诉浏览器直接使用缓存</li>
</ul>
<h5 id="2-2-ETag"><a href="#2-2-ETag" class="headerlink" title="2.2 ETag"></a>2.2 ETag</h5><p>本质就是对请求的资源通过md5算法运算，生成的结果哪怕动了一个字节都算是修改，存储和请求方式和上面相似</p>
<p>浏览器接受到ETag值，会在下次请求的时候，将这个值作为<strong>「If-None-Match」</strong>这个字段的内容，发给服务器。</p>
<p>服务器接收到<strong>「If-None-Match」</strong>后，会跟服务器上该资源的<strong>「ETag」</strong>进行比对👇</p>
<ul>
<li>如果两者一样的话，直接返回304，告诉浏览器直接使用缓存</li>
<li>如果不一样的话，说明内容更新了，返回新的资源，跟常规的HTTP请求响应的流程一样</li>
</ul>
<h5 id="2-3-总结："><a href="#2-3-总结：" class="headerlink" title="2.3 总结："></a>2.3 总结：</h5><p>协商缓存的两种方式</p>
<ul>
<li>性能上：Last-Modified更好，因为etag需要运算</li>
<li>精度上：etag更好，比如说某个资源文件，只是touch了一下，并没有修改内容，在修改时间上是更新了，但是本质上内容没变。</li>
<li>如果两种方式都支持，优先考虑etag</li>
</ul>
<h4 id="3-缓存位置"><a href="#3-缓存位置" class="headerlink" title="3 缓存位置"></a>3 缓存位置</h4><p>总结来说：大的js，css缓存是放在磁盘中，一些小的资源类是放在内存中</p>
<h4 id="4-总结"><a href="#4-总结" class="headerlink" title="4 总结"></a>4 总结</h4><ul>
<li><p>首先检查<code>Cache-Control</code>， 尝鲜，看强缓存是否可用</p>
</li>
<li><p>如果可用的话，直接使用</p>
</li>
<li><p>否则进入协商缓存，发送HTTP请求，服务器通过请求头中的<code>If-Modified-Since</code>或者<code>If-None-Match</code>字段检查资源是否更新</p>
</li>
<li><p>资源更新，返回资源和200状态码。</p>
</li>
<li><p>否则，返回304，直接告诉浏览器直接从缓存中去资源。</p>
</li>
</ul>
<h3 id="四、HTTP和HTTPS"><a href="#四、HTTP和HTTPS" class="headerlink" title="四、HTTP和HTTPS"></a>四、HTTP和HTTPS</h3><p>HTTPS不是一个行的应用层协议，本质是HTTP+TLS/SSL协议的组合，保证安全性是SSL/TLS的工作</p>
<ul>
<li>SSL：安全套接层2</li>
<li>TLS：传输层安全（非对称加密）</li>
</ul>
<p>HTTPS的关键：</p>
<ul>
<li>对数据进行加密，并建立一个信息安全通道，来保证传输过程中的数据安全;</li>
<li>对网站服务器进行真实身份认证。</li>
</ul>
<h3 id="五、短轮询，长轮询，WebSocket"><a href="#五、短轮询，长轮询，WebSocket" class="headerlink" title="五、短轮询，长轮询，WebSocket"></a>五、短轮询，长轮询，WebSocket</h3><h4 id="1-短轮询"><a href="#1-短轮询" class="headerlink" title="1 短轮询"></a>1 短轮询</h4><p>通过不断建立http请求，无论数据是否有更新都直接响应</p>
<p>优缺点：</p>
<ul>
<li>优点：简单</li>
<li>缺点：大量浪费资源</li>
</ul>
<h4 id="2-长轮询"><a href="#2-长轮询" class="headerlink" title="2 长轮询"></a>2 长轮询</h4><p>接受到请求不会直接响应，先把这个请求挂起，判断服务端数据是否有更新</p>
<p>如果有更新就响应，没有更新就等一会再返回</p>
<p>优缺点：</p>
<ul>
<li>优点：比短轮询节省了资源</li>
<li>缺点：挂起也会导致资源的浪费</li>
</ul>
<h4 id="3-WebSocket"><a href="#3-WebSocket" class="headerlink" title="3 WebSocket"></a>3 WebSocket</h4><p>WebSocket 是 Html5 定义的一个新协议，与传统的 http 协议不同，该协议允许由服务器主动的向客户端推送信息。</p>
<p>使用 WebSocket 协议的缺点是在服务器端的配置比较复杂。WebSocket 是一个全双工的协议，也就是通信双方是平等的，可以相互发送消息。</p>
<h3 id="六、正向代理和反向代理"><a href="#六、正向代理和反向代理" class="headerlink" title="六、正向代理和反向代理"></a>六、正向代理和反向代理</h3><p>正向代理：</p>
<p>我要去找马云借钱，但是直接找马云他不会给我，我可以通过花呗找马云借钱，隐藏的是我（客户端）</p>
<p>反向代理：</p>
<p>输入<a target="_blank" rel="noopener" href="http://www.baidu.com,我们不知道是哪台服务器为我们工作,但是只要能访问到就行,隐藏的是服务器/">www.baidu.com，我们不知道是哪台服务器为我们工作，但是只要能访问到就行，隐藏的是服务器</a></p>
<p>一般反向代理用于实现服务器的负载均衡</p>
</div><div id="reward-container"><span class="hty-icon-button button-glow" id="reward-button" title="打赏" onclick="var qr = document.getElementById(&quot;qr&quot;); qr.style.display = (qr.style.display === &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;;"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-hand-coin-line"></use></svg></span><div id="reward-comment">点我就给你看点有意思的</div><div id="qr" style="display:none;"><div style="display:inline-block"><a target="_blank" rel="noopener" href="https://gitee.com/huang_zhao/hz/raw/master/hz/alipay.png"><img loading="lazy" src="https://gitee.com/huang_zhao/hz/raw/master/hz/alipay.png" alt="支付宝" title="支付宝"></a><div><span style="color:#00A3EE"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-alipay-line"></use></svg></span></div></div><div style="display:inline-block"><a target="_blank" rel="noopener" href="https://gitee.com/huang_zhao/hz/raw/master/hz/qqpay.jpg"><img loading="lazy" src="https://gitee.com/huang_zhao/hz/raw/master/hz/qqpay.jpg" alt="QQ 支付" title="QQ 支付"></a><div><span style="color:#12B7F5"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-qq-line"></use></svg></span></div></div><div style="display:inline-block"><a target="_blank" rel="noopener" href="https://gitee.com/huang_zhao/hz/raw/master/hz/wxpay.jpg"><img loading="lazy" src="https://gitee.com/huang_zhao/hz/raw/master/hz/wxpay.jpg" alt="微信支付" title="微信支付"></a><div><span style="color:#2DC100"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-wechat-pay-line"></use></svg></span></div></div></div></div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong>爱肖彤真是太好了</li><li class="post-copyright-link"><strong>本文链接：</strong><a href="http://huang_zhao.gitee.io/task/2020/09/13/%E5%89%8D%E7%AB%AF/HTTP%E5%8D%8F%E8%AE%AE%E6%9F%A5%E6%BC%8F%E8%A1%A5%E7%BC%BA/" title="HTTP协议查漏补缺">http://huang_zhao.gitee.io/task/2020/09/13/%E5%89%8D%E7%AB%AF/HTTP%E5%8D%8F%E8%AE%AE%E6%9F%A5%E6%BC%8F%E8%A1%A5%E7%BC%BA/</a></li><li class="post-copyright-license"><strong>版权声明：</strong>本博客所有文章除特别声明外，均默认采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" title="CC BY-NC-SA 4.0 "><svg class="icon"><use xlink:href="#icon-creative-commons-line"></use></svg><svg class="icon"><use xlink:href="#icon-creative-commons-by-line"></use></svg><svg class="icon"><use xlink:href="#icon-creative-commons-nc-line"></use></svg><svg class="icon"><use xlink:href="#icon-creative-commons-sa-line"></use></svg></a> 许可协议。</li></ul></section></article><div class="post-nav"><div class="post-nav-item"><a class="post-nav-prev" href="/task/2020/09/13/%E5%89%8D%E7%AB%AF/Typescript%E5%85%A5%E9%97%A8%EF%BC%8C%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/" rel="prev" title="Typescript入门，基本数据类型"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-arrow-left-s-line"></use></svg><span class="post-nav-text">Typescript入门，基本数据类型</span></a></div><div class="post-nav-item"><a class="post-nav-next" href="/task/2020/07/01/%E5%85%B6%E4%BB%96/git%E5%AD%A6%E4%B9%A0/" rel="next" title="git使用"><span class="post-nav-text">git使用</span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-arrow-right-s-line"></use></svg></a></div></div></div></main><footer class="sidebar-translate" id="footer"><div class="copyright"><span>&copy; 2019 – 2022 </span><span class="with-love" id="animate"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-cloud-line"></use></svg></span><span class="author"> 爱肖彤真是太好了</span></div><div class="powered"><span>由 <a href="https://hexo.io" target="_blank" rel="noopener">Hexo</a> 驱动 v5.1.1</span><span class="footer-separator">|</span><span>主题 - <a rel="noopener" href="https://github.com/YunYouJun/hexo-theme-yun" target="_blank"><span>Yun</span></a> v0.9.7</span></div><div class="live_time"><span>本博客已萌萌哒地运行</span><span id="display_live_time"></span><span class="moe-text">(●'◡'●)</span><script>function blog_live_time() {
  window.setTimeout(blog_live_time, 1000);
  const start = new Date('2019-04-12T00:00:00');
  const now = new Date();
  const timeDiff = (now.getTime() - start.getTime());
  const msPerMinute = 60 * 1000;
  const msPerHour = 60 * msPerMinute;
  const msPerDay = 24 * msPerHour;
  const passDay = Math.floor(timeDiff / msPerDay);
  const passHour = Math.floor((timeDiff % msPerDay) / 60 / 60 / 1000);
  const passMinute = Math.floor((timeDiff % msPerHour) / 60 / 1000);
  const passSecond = Math.floor((timeDiff % msPerMinute) / 1000);
  display_live_time.innerHTML = " " + passDay + " 天 " + passHour + " 小时 " + passMinute + " 分 " + passSecond + " 秒";
}
blog_live_time();
</script></div><div id="busuanzi"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span id="busuanzi_container_site_uv" title="总访客量"><span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-user-line"></use></svg></span><span id="busuanzi_value_site_uv"></span></span><span class="footer-separator">|</span><span id="busuanzi_container_site_pv" title="总访问量"><span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-eye-line"></use></svg></span><span id="busuanzi_value_site_pv"></span></span></div></footer><a class="hty-icon-button" id="goUp" aria-label="back-to-top" href="#"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-arrow-up-s-line"></use></svg><svg class="progress-circle-container" viewBox="0 0 100 100"><circle class="progress-circle" id="progressCircle" cx="50" cy="50" r="48" fill="none" stroke="#0078E7" stroke-width="2" stroke-linecap="round"></circle></svg></a><a class="popup-trigger hty-icon-button icon-search" id="search" href="javascript:;" title="搜索"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-search-line"></use></svg></span></a><script>window.addEventListener("DOMContentLoaded", () => {
  // Handle and trigger popup window
  document.querySelector(".popup-trigger").addEventListener("click", () => {
    document.querySelector(".popup").classList.add("show");
    setTimeout(() => {
      document.querySelector(".search-input").focus();
    }, 100);
  });

  // Monitor main search box
  const onPopupClose = () => {
    document.querySelector(".popup").classList.remove("show");
  };

  document.querySelector(".popup-btn-close").addEventListener("click", () => {
    onPopupClose();
  });

  window.addEventListener("keyup", event => {
    if (event.key === "Escape") {
      onPopupClose();
    }
  });
});
</script><script src="/task/js/search/local-search.js" defer></script><div class="popup search-popup"><div class="search-header"><span class="popup-btn-close close-icon hty-icon-button"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-close-line"></use></svg></span></div><div class="search-input-container"><input class="search-input" id="local-search-input" type="text" placeholder="搜索..." value=""></div><div id="local-search-result"></div></div></div><script defer src="/task/js/utils.js"></script><script defer src="/task/js/hexo-theme-yun.js"></script></body></html>